<template>
  <div>
    <!-- 大盒子 -->
    <div class="app">
      <!-- 头部 -->
      <header>
        <!-- 上部分 -->
        <div class="main-top">
          <a class="hei-a" href=""> 全部商品<span>(108)</span> </a>
          <a class="bai-a" href=""> 降价通知<span>(48)</span> </a>
          <a href=""> 全部商品<span>(108)</span> </a>
        </div>
      </header>
      <!-- 主要内容 -->
      <main>
        <!-- 第二个车 -->
        <div class="second" id="sss">
          <!-- 内容 -->
          <div class="second-cont">
            <!-- 第一排 -->
            <div class="cont-top">
              <!-- 左面 -->
              <div class="top-left">
                <input type="checkbox" @click="qx1" v-bind:checked="bool" />
                <div class="left1">
                  <img src="../assets/矢量智能对象.png" alt="" />
                  <span>路易斯女装旗舰店</span>
                </div>
              </div>
              <!-- 右面 -->
              <a class="right1" href="">
                优惠卷
                <span></span>
              </a>
            </div>
            <!-- 第二排 -->
            <div class="second-s">
              <span>满减</span>
              <p>满100减5元优惠活动，付款减5元</p>
            </div>
            <!-- 第三排 -->
            <div class="third">
              <!-- 第一个 -->
              <div class="third-top">
                <!-- 左面 -->
                <div class="t-t-left">
                  <a class="duihao" href="">
                    <input type="checkbox" @click="dj1" v-bind:checked="dx1" />
                  </a>
                  <a class="tp" href="">
                    <img src="../assets/11986650.png" alt="" />
                  </a>
                </div>
                <!-- 右面 -->
                <div class="t-t-right">
                  <p>夏季新款牛仔裤短裤女韩版宽</p>
                  <p>松不规则毛边显瘦热裤潮</p>
                  <span>品牌店 | 1.2万+人付款</span>
                </div>
              </div>
              <!-- 第二行 -->
              <div class="third-s">
                <span>￥{{ shang }}</span>
                <!-- 右面按钮 -->
                <div class="right-small">
                  <a class="baibai" href="javascript:;">
                    <img src="../assets/矩形 16.png" alt="" @click="jian" />
                  </a>
                  {{ j }}
                  <a class="heihei" href="javascript:;">
                    <img src="../assets/矩形+.png" alt="" @click="jia" />
                  </a>
                </div>
              </div>
            </div>
            <!-- 第四排 -->
            <div class="third">
              <!-- 第一个 -->
              <div class="third-top">
                <!-- 左面 -->
                <div class="t-t-left">
                  <a class="duihao" href="">
                    <input type="checkbox" @click="dj2" v-bind:checked="dx2" />
                  </a>
                  <a class="tp" href="">
                    <img src="../assets/11626638.png" alt="" />
                  </a>
                </div>
                <!-- 右面 -->
                <div class="t-t-right">
                  <p>清新高跟鞋女2019新款性感红</p>
                  <p>色单鞋女百搭细跟尖头女鞋</p>
                  <span>品牌店 | 3.5万+人付款</span>
                </div>
              </div>
              <!-- 第二行 -->
              <div class="third-s">
                <span>￥{{ shang2 }}</span>
                <!-- 右面按钮 -->
                <div class="right-small">
                  <a class="baibai" href="javascript:;">
                    <img src="../assets/矩形 16.png" @click="jian1" alt="" />
                  </a>
                  {{ i }}
                  <a class="heihei" href="javascript:;">
                    <img src="../assets/矩形+.png" @click="jia1" alt="" />
                  </a>
                </div>
              </div>
            </div>
            <!-- 成功 -->
            <div class="chenggong">
              下单成功可获得100积分，用积分可兑换精美好礼
            </div>
          </div>
        </div>
        <!-- 第二个车 -->
        <div class="second">
          <!-- 内容 -->
          <div class="second-cont">
            <!-- 第一排 -->
            <div class="cont-top">
              <!-- 左面 -->
              <div class="top-left">
                <input type="checkbox" @click="qx2" v-bind:checked="bool2" />
                <div class="left1">
                  <img src="/.z.assets/矢量智能对象.png" alt="" />
                  <span>路易斯女装旗舰店</span>
                </div>
              </div>
              <!-- 右面 -->
              <a class="right1" href="">
                优惠卷
                <span></span>
              </a>
            </div>
            <!-- 第二排 -->
            <div class="second-s">
              <span>满减</span>
              <p>满100减5元优惠活动，付款减5元</p>
            </div>
            <!-- 第三排 -->
            <div class="third">
              <!-- 第一个 -->
              <div class="third-top">
                <!-- 左面 -->
                <div class="t-t-left">
                  <a class="duihao" href="">
                    <input type="checkbox" @click="dj3" v-bind:checked="dx3" />
                  </a>
                  <a class="tp" href="">
                    <img src="../assets/12210528.png" alt="" />
                  </a>
                </div>
                <!-- 右面 -->
                <div class="t-t-right">
                  <p>夏季 休闲裤男商务男士韩版直</p>
                  <p>筒宽松薄款男西裤</p>
                  <span>寻品牌店 | 4.6万+人付款</span>
                </div>
              </div>
              <!-- 第二行 -->
              <div class="third-s">
                <span>￥{{ shang }}</span>
                <!-- 右面按钮 -->
                <div class="right-small">
                  <a class="baibai" href="javascript:;">
                    <img src="../assets/矩形 16.png" alt="" @click="jian2" />
                  </a>
                  {{ n }}
                  <a class="heihei" href="javascript:;">
                    <img src="../assets/矩形+.png" alt="" @click="jia2" />
                  </a>
                </div>
              </div>
            </div>
            <!-- 第三排 -->
            <div class="third">
              <!-- 第一个 -->
              <div class="third-top">
                <!-- 左面 -->
                <div class="t-t-left">
                  <a class="duihao" href="">
                    <input type="checkbox" @click="dj4" v-bind:checked="dx4" />
                  </a>
                  <a class="tp" href="">
                    <img src="../assets/11986650.png" alt="" />
                  </a>
                </div>
                <!-- 右面 -->
                <div class="t-t-right">
                  <p>夏季新款牛仔裤短裤女韩版宽</p>
                  <p>松不规则毛边显瘦热裤潮</p>
                  <span>品牌店 | 1.2万+人付款</span>
                </div>
              </div>
              <!-- 第二行 -->
              <div class="third-s">
                <span>￥{{ shang2 }}</span>
                <!-- 右面按钮 -->
                <div class="right-small">
                  <a class="baibai" href="javascript:;">
                    <img src="../assets/矩形 16.png" alt="" @click="jia3" />
                  </a>
                  {{ m }}
                  <a class="heihei" href="javascript:;">
                    <img src="../assets/矩形+.png" alt="" @click="jia3" />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 支付 -->
        <div class="buy">
          <!-- 左面 -->
          <div class="buy-left">
            <div class="left-11">
              <input type="checkbox" @click="qx3" v-bind:checked="qxzz" />
              全选
            </div>
            <div class="left-22">
              <p>
                <span class="s1">总计</span> <span class="s2">￥</span
                ><span class="s3">{{ zongjia }}</span>
              </p>
              <h5>不包含运费</h5>
            </div>
          </div>
          <!-- 右面 -->
          <a class="right-aa" href=""> 去结算 </a>
        </div>
      </main>
    </div>
  </div>
</template>
<style scoped>
/* 大盒子 */
.app,
html,
body {
  width: 100%;
  height: 100%;
}
.duihao input {
  background: #ccc;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
}
.app {
  display: flex;
  flex-direction: column;
}
/* 头部 */
header {
  width: 100%;
  height: 0.88rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.3rem;
  align-items: center;
}
.gwc {
  font-size: 0.33rem;
  color: #333;
}
.nav {
  width: 1.4rem;
  height: 0.88rem;
  display: flex;
  justify-content: space-between;
}
.nav .xx {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 0.11rem;
  padding-bottom: 0.13rem;
  justify-content: space-between;
  width: 0.5rem;
  white-space: nowrap;
}
.nav .bj {
  height: 0.88rem;
  font-size: 0.28rem;
  color: #333;
  display: flex;
  align-items: center;
}
.nav a img {
  width: 0.34rem;
  height: 0.4rem;
}
.nav span {
  font-size: 0.19rem;
  color: #333;
}
/* 主要内容 */
main {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}
/* 上部分 */
.main-top {
  border-top: 1px solid #f2f2f2;
  width: 100%;
  height: 0.71rem;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0rem;
  left: 0%;
  background: #fff;
}
.main-top a {
  display: flex;
  width: 33.3%;
  height: 0.7rem;
  font-size: 0.26rem;
  justify-content: center;
  align-items: center;
  color: #333333;
}
.main-top a span {
  font-size: 0.21rem;
  display: flex;
  align-items: center;
  padding-top: 0.05rem;
  height: 0.7rem;
}
.main-top .hei-a {
  background: #333;
  color: #fff;
}
.main-top .bai-a {
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
}
/*第二个车 */
.second {
  width: 100%;
  height: 6.05rem;
  background: #f2f2f2;
  padding: 0.2rem 0.3rem 0;
}
/* 内容 */
.second-cont {
  width: 100%;
  height: 5.85rem;
  background: #fff;
  border-radius: 0.08rem;
}
/* 第一排 */
.cont-top {
  width: 100%;
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  padding-left: 0.2rem;
  padding-right: 0.16rem;
}
/* 左面 */
.top-left {
  width: 3.1rem;
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-left input {
  width: 0.3rem;
  height: 0.3rem;
  display: flex;
  background: #f2f2f2;
  border-radius: 50%;
}
.left1 {
  width: 2.5rem;
  display: flex;
  align-items: center;
}
.left1 img {
  width: 0.24rem;
  height: 0.22rem;
}
.left1 span {
  font-size: 0.26rem;
  color: #333;
}
/*右面 */
.right1 {
  width: 1rem;
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.21rem;
  color: #333;
  white-space: nowrap;
}
.right1 span {
  display: block;
  width: 0.14rem;
  height: 0.14rem;
  border-style: solid;
  border-width: 0.04rem 0.04rem 0 0;
  border-color: #3b3b3b;
  transform: rotate(45deg);
}
/* 第二排 */
.second-s {
  width: 100%;
  height: 0.71rem;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  align-items: center;
  padding-left: 0.28rem;
}
.second-s span {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.15rem;
  width: 0.67rem;
  height: 0.3rem;
  background: #333;
  border-radius: 0.14rem;
  color: #fff;
  font-size: 0.21rem;
}
.second-s p {
  font-size: 0.24rem;
  color: #333;
}
/* 第三排 */
.third {
  width: 100%;
  height: 1.98rem;
  padding-top: 0.2rem;
  display: flex;
  flex-direction: column;
}
/* 第一个 */
.third-top {
  width: 100%;
  height: 1.26rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0.17rem;
  padding-right: 0.16rem;
}
/* 左面 */
.t-t-left {
  width: 2.38rem;
  height: 1.26rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.duihao {
  width: 0.36rem;
  height: 0.36rem;
  display: flex;
}
.duihao img {
  width: 0.36rem;
  height: 0.36rem;
}
.tp {
  width: 1.78rem;
  height: 1.26rem;
  display: flex;
}
.tp img {
  width: 1.78rem;
  height: 1.26rem;
}
/* 右面 */
.t-t-right {
  width: 3.67rem;
  height: 1.26rem;
  display: flex;
  flex-direction: column;
  padding-top: 0.08rem;
}
.t-t-right p {
  font-size: 0.25rem;
  color: #333;
}
.t-t-right span {
  font-size: 0.18rem;
  color: #808080;
}
/* 第二行 */
.third-s {
  width: 100%;
  height: 0.52rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1.08rem;
  padding-right: 0.16rem;
}
.third-s span {
  font-size: 0.24rem;
  color: #f90f61;
}
/* 右面按钮 */
.right-small {
  width: 1.16rem;
  display: flex;
  height: 0.52rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.21rem;
  color: #333;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}

a,
input,
button {
  -webkit-tap-highlight-color: transparent;
  /* 移除点击产生的高亮效果：透明色 */
}
img,
a {
  -webkit-touch-callout: none;
  /* 禁止长按弹出菜单 */
}
img {
  vertical-align: middle;
}
/* 人造换轴 */
.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
}
.right-small a {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.baibai img {
  width: 0.17rem;
  height: 0.03rem;
}
.heihei img {
  width: 0.17rem;
  height: 0.17rem;
}
/* 白按钮 */
.baibai {
  background: #f2f2f2;
}
.heihei {
  background: #333333;
}
/* 成功 */
.chenggong {
  height: 0.59rem;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 0.37rem;
  font-size: 0.21rem;
  color: #333;
}
/* 支付 */
.buy {
  width: 100%;
  height: 0.88rem;
  display: flex;
  justify-content: space-between;
}
/* 左面 */
.buy-left {
  padding-left: 0.33rem;
  padding-right: 0.46rem;
  display: flex;
  align-items: center;
  width: 4.58rem;
  justify-content: space-between;
}
.left-11 {
  width: 1.16rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.28rem;
  color: #333;
}
.left-11 span {
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: #b3b3b3;
  display: flex;
}
/* 中 */
.left-22 {
  width: 1.4rem;
  height: 0.88rem;
  padding-top: 0.15rem;
  padding-bottom: 0.14rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  white-space: nowrap;
}
.left-22 p {
  display: flex;
  align-items: center;
}
.s1 {
  font-size: 0.28rem;
  color: #333;
}
.s2 {
  font-size: 0.15rem;
  color: #e93534;
}
.s3 {
  font-size: 0.28rem;
  color: #e93534;
}
.left-22 h5 {
  font-size: 0.2rem;
  color: #626262;
  font-weight: 400;
}
/* 右面 */
.right-aa {
  width: 2.92rem;
  height: 0.88rem;
  background: #f90f61;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.3rem;
  color: #fff;
}
/* 尾部 */
footer {
  border-top: 1px solid #f2f2f2;
  padding-left: 0.52rem;
  padding-right: 0.57rem;
  width: 100%;
  height: 0.9em;
  display: flex;
  justify-content: space-between;
}
footer a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 0.9rem;
  padding-bottom: 0.1rem;
  padding-top: 0.19rem;
  align-items: center;
}
footer a img {
  height: 0.32rem;
}
footer a span {
  font-size: 0.18rem;
  color: #808080;
}
.te {
  color: #808080;
}
</style>
<script>
export default {
  data() {
    return {

      n: 0,
      m: 0,
      j: 0,
      i: 0,
      zongjia: 0,
      shang: 19.6,
      shang2: 9.6,
      bool: false,
      bool2: false,
      dx1: false,
      dx2: false,
      q: 0,
      dx3: false,
      dx4: false,
      qxzz: false,
      shangpin1: 19.6,
      shangpin2: 9.6,
    };
  },
  methods: {
    qx1() {
      this.bool = !this.bool;
      if (this.bool == true) {
        this.dx1 = true;
        this.dx2 = true;
      } else {
        this.dx1 = false;
        this.dx2 = false;
      }
    },
    qx2() {
      this.bool2 = !this.bool2;
      if (this.bool2 == true) {
        this.dx3 = true;
        this.dx4 = true;
      } else {
        this.dx3 = false;
        this.dx4 = false;
      }
    },
    qx3() {
      this.qxzz = !this.qxzz;
      if (this.qxzz == true) {
        this.bool = true;
        this.bool2 = true;
        this.dx1 = true;
        this.dx2 = true;
        this.dx3 = true;
        this.dx4 = true;
      } else {
        this.bool = false;
        this.bool2 = false;
        this.dx1 = false;
        this.dx2 = false;
        this.dx3 = false;
        this.dx4 = false;
      }
    },
    dj1() {
      this.dx1 = !this.dx1;
      if (this.bool == false) {
        if (this.dx1 == true && this.dx2 == true) {
          this.bool = true;
        } else {
          this.bool = false;
        }
      } else {
        this.bool = false;
      }
    },
    dj2() {
      this.dx2 = !this.dx2;
      if (this.bool == false) {
        if (this.dx1 == true && this.dx2 == true) {
          this.bool = true;
        } else {
          this.bool = false;
        }
      } else {
        this.bool = false;
      }
    },
    dj3() {
      this.dx3 = !this.dx3;
      if (this.bool2 == false) {
        if (this.dx3 == true && this.dx4 == true) {
          this.bool2 = true;
        } else {
          this.bool2 = false;
        }
      } else {
        this.bool2 = false;
      }
    },
    dj4() {
      this.dx4 = !this.dx4;
      if (this.bool2 == false) {
        if (this.dx3 == true && this.dx4 == true) {
          this.bool2 = true;
        } else {
          this.bool2 = false;
        }
      } else {
        this.bool2 = false;
      }
    },
    jia() {
      this.j++;
      this.zongjia =
        this.shangpin1 * this.j +
        this.shangpin1 * this.n +
        this.shangpin2 * this.i +
        this.shangpin2 * this.m;
      this.zongjia = this.zongjia.toFixed(2);
    },
    jian() {
      this.j--;
      this.zongjia =
        this.shangpin1 * this.j +
        this.shangpin1 * this.n +
        this.shangpin2 * this.i +
        this.shangpin2 * this.m;
      this.zongjia = this.zongjia.toFixed(2);
    },
    jia1() {
      this.i++;
      this.zongjia =
        this.shangpin1 * this.j +
        this.shangpin1 * this.n +
        this.shangpin2 * this.i +
        this.shangpin2 * this.m;
      this.zongjia = this.zongjia.toFixed(2);
    },
    jian1() {
      this.i--;
      this.zongjia =
        this.shangpin1 * this.j +
        this.shangpin1 * this.n +
        this.shangpin2 * this.i +
        this.shangpin2 * this.m;
      this.zongjia = this.zongjia.toFixed(2);
    },
    jia2() {
      this.n++;
      this.zongjia =
        this.shangpin1 * this.j +
        this.shangpin1 * this.n +
        this.shangpin2 * this.i +
        this.shangpin2 * this.m;
      this.zongjia = this.zongjia.toFixed(2);
    },
    jian2() {
      this.n--;
      this.zongjia =
        this.shangpin1 * this.j +
        this.shangpin1 * this.n +
        this.shangpin2 * this.i +
        this.shangpin2 * this.m;
      this.zongjia = this.zongjia.toFixed(2);
    },
    jia3() {
      this.m++;
      this.zongjia =
        this.shangpin1 * this.j +
        this.shangpin1 * this.n +
        this.shangpin2 * this.i +
        this.shangpin2 * this.m;
      this.zongjia = this.zongjia.toFixed(2);
    },
    jian3() {
      this.m--;
      this.zongjia =
        this.shangpin1 * this.j +
        this.shangpin1 * this.n +
        this.shangpin2 * this.i +
        this.shangpin2 * this.m;
      this.zongjia = this.zongjia.toFixed(2);
    },
  },
};
</script>
